<link rel="stylesheet" href="user/add/default.css"/>
<link rel="stylesheet" href="user/add/set2.css"/>

<section class="htmleaf-content">
	<h2>添加用户 </h2>
	<span class="input input--nao">
		<input class="input__field input__field--nao" type="text" id="input-1" />
		<label class="input__label input__label--nao" for="input-1">
			<span class="input__label-content input__label-content--nao">姓名</span>
		</label>
		<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
			<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
		</svg>
	</span>
	<span class="input input--nao">
		<input class="input__field input__field--nao" type="text" id="input-2" />
		<label class="input__label input__label--nao" for="input-2">
			<span class="input__label-content input__label-content--nao">用户名</span>
		</label>
		<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
			<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
		</svg>
	</span>
	<span class="input input--nao">
		<input class="input__field input__field--nao" type="text" id="input-3" />
		<label class="input__label input__label--nao" for="input-3">
			<span class="input__label-content input__label-content--nao">密码</span>
		</label>
		<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
			<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
		</svg>
	</span>
</section>
<script src="user/add/classie.js"></script>
<script>
	(function() {
		// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
		if (!String.prototype.trim) {
			(function() {
				// Make sure we trim BOM and NBSP
				var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
				String.prototype.trim = function() {
					return this.replace(rtrim, '');
				};
			})();
		}

		[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
			// in case the input is already filled..
			if( inputEl.value.trim() !== '' ) {
				classie.add( inputEl.parentNode, 'input--filled' );
			}

			// events:
			inputEl.addEventListener( 'focus', onInputFocus );
			inputEl.addEventListener( 'blur', onInputBlur );
		} );

		function onInputFocus( ev ) {
			classie.add( ev.target.parentNode, 'input--filled' );
		}

		function onInputBlur( ev ) {
			if( ev.target.value.trim() === '' ) {
				classie.remove( ev.target.parentNode, 'input--filled' );
			}
		}
	})();
</script>